<template>
	<view class="content"
		style="background-image: url('https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/ctop.png'); background-size:100% 100%;">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar" :style="{ height: navBarHeight + 'px' }">
				<view>星阁</view>
			</view>
			<view class="navTab dflexJcc">
				<view class="tab-txt" @click="onTab(1)">
					<view :style="{color:tabIndex === 1?'#92FFEC':'#406662'}">耳语</view>
					<view class="underline">
						<image v-if='tabIndex === 1'
							src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/tab_xz.png"></image>
					</view>
				</view>
				<view class="tab-txt" @click="onTab(2)">
					<view :style="{color:tabIndex === 2?'#92FFEC':'#406662'}">阁楼</view>
					<view class="underline">
						<image v-if='tabIndex === 2'
							src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/tab_xz.png"></image>
					</view>
				</view>
			</view>
			<!-- tabContent -->
			<view v-if="tabIndex === 1">
				<Swiper />
			</view>
			<view v-else>
				ww
			</view>
		</view>
		<!-- 	<button size=" default" type="default" @click="getUser(1)">
							连接测试</button> -->
	</view>
</template>
<!-- https://huangwei0825.gitee.io/wechat-img/static/ctop.png -->
<!-- https://img.keaitupian.cn/newupload/06/1655879349496854.jpg -->
<script>
	import {
		getUserProfile
	} from "@/api/system/user"

	import Swiper from "@/components/swiper/swiper.vue"

	export default {
		 components:{
		      Swiper
		    },
		data() {
			return {
				title: this.baseUrl,
				// 状态栏高度
				statusBarHeight: 20,
				// 导航栏高度
				navBarHeight: 40,
				// 初始化tab
				tabIndex: 1,

			};
			
		},
		onLoad() {},
		//第一次加载时调用
		created() {
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			let systemInfo = wx.getSystemInfoSync();
			//状态栏高度
			let statusBarHeight = Number(systemInfo.statusBarHeight);
			let menu = wx.getMenuButtonBoundingClientRect()
			//导航栏高度
			let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2
			//状态栏加导航栏高度
			let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2
			this.statusBarHeight = Number(systemInfo.statusBarHeight);
			this.navBarHeight = navBarHeight;
			console.log('状态栏高度', statusBarHeight)
			console.log('导航栏高度', navBarHeight)
			console.log('状态栏加导航栏高度', navStatusBarHeight)
			// #endif
		},
		methods: {
			getUser(e) {
				console.log(e);
				getUserProfile({
					Authorization: 1,
					clientInfo: 2
				}).then(response => {
					console.log(response)
				}).catch(err => {
					console.log(err);
				})
			},

			// onTab
			onTab(e) {
				this.tabIndex = e
			}
		}
	};
</script>

<style lang="scss">
	.content {
		height: 100vh;
		width: 100%;
	}

	.navBarBox {
		.statusBar {}

		.navBar {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.navBar {
			font-size: 18px;
			font-weight: 700;
			text-align: center;
			color: #fff;
		}

		.navTab {
			//styleName: 标题_加粗;
			font-size: 16px;
			font-weight: 700;
			color: #406662;
			margin: 20px auto;

			.underline {
				width: 80rpx;
				height: 24rpx;
			}

			.tab-txt {
				text-align: center;
				margin: 0 12px;
			}
		}
	}
</style>